<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>bookList</title>

	<link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
	<style>
		
		.div1{height:90px;background-color:gray}
		.pdoc{line-height:90px;font-size:50px;color:white}
		.navcent{text-align:center}
		#phb{height:50px;background-color:gray;color:white;padding:10px}
	</style>
</head>
<body>
	<div class="container">
		
		<div class="row">
				<div class="col-md-12 div1">
				<!--导航-->
					<h1>我的预约记录</h1>
					<!--END导航-->
				</div>		
		</div>
		<div class="row">
			<div class="col-md-12">
				<!--搜索导航-->
					<nav class="navbar navbar-default">
					  <div class="container-fluid">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
						  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						  </button>
						  <a class="navbar-brand" href="#">您好！<span style="color:red;">${sessionScope.user.name}</span></a>
						</div>

						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						  <ul class="nav navbar-nav">
							<li class="active"><a href="#">客服中心 <span class="sr-only">(current)</span></a></li>
							<li><a href="#">医疗保险</a></li>
							<li class="dropdown">
							  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">设置 <span class="caret"></span></a>
							  <ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">One more separated link</a></li>
							  </ul>
							</li>
						  </ul>
						  <form id="ff" class="navbar-form navbar-left">
							  <input class="form-control" type="hidden" id="page" name="page" value="1">
							<div class="form-group">
							  <input type="text" class="form-control" placeholder="请输入时间">
							</div>
							<button type="submit" class="btn btn-default">搜索</button>
							<span>当前余额:￥<span style="color:red;">${sessionScope.user.balance}</span></span>
							<span>当前积分:￥<span style="color:red;">10</span></span>
						  </form>
						  <ul class="nav navbar-nav navbar-right">
						 
						  <li><a href="/hospital/index" style="color:red">返回</a></li>
							<li><a href="list">我的历史预约</a></li>
							<li class="dropdown">
							  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">关于 <span class="caret"></span></a>
							  <ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
							  </ul>
							</li>
						  </ul>
						</div><!-- /.navbar-collapse -->
					  </div><!-- /.container-fluid -->
					</nav>
				<!--END搜索导航-->
			</div>
			<div class="row">
				<div class="col-md-12">
					<!--分页列表-->
						<table class="table table-striped">
								<tbody>
									<tr>

										<th>编号</th>
										<th>科室名称</th>
										<th>医生姓名</th>
										<th>预约时间</th>
										<th>挂号费用</th>
										<th>操作</th>
									</tr>
									<c:forEach var="b" items="${books.list}">
										<tr>
											<td><h4>${b.id}</h4></td>
											<td><h4>${b.plan.doctor.dept.dept_name}-${b.plan.doctor.dept.dept_loc}-${b.plan.doctor.dept.dept_phone}</h4></td>
											<td><h4>${b.plan.doctor.doc_name}</h4></td>
											<td><h4>
												<fmt:formatDate type="time" value="${b.time}" pattern='MM-dd HH:mm'/>
												(${b.plan.plan_worktime==0?"上午":"下午"})
											</h4></td>
											<td><h4>${b.money}</h4></td>
											<td>

												<a href="cancelBook/${b.id}" onclick="return confirm('你确定要取消预约吗?');"><button type="button" class="btn btn-success" data-container="body">取消预约</button></a>

											</td>
										</tr>
									</c:forEach>
							    </tbody>
								<tr>
									<td colspan="8" style="text-align:center">
										<nav>
											<ul class="pagination">
												<li>
													<a href="javascript:getPage(1);$(&#39;#ff&#39;).submit()" aria-label="Previous">
														<span aria-hidden="true">«</span>
													</a>
												</li>
												<c:forEach var="pg" begin="1" end="${books.pages}">
													<li><a href="?page=${pg}">${pg}</a></li>
												</c:forEach>
												<li>
													<a href="javascript:getPage(2)" aria-label="Next">
														<span aria-hidden="true">»</span>
													</a>
												</li>
											</ul>
										</nav>

									</td>
								</tr>
							 </table>
							 <!--分页-->
							 <!--END分页-->
					<!--END分页列表-->
				</div>

			</div>
		</div>


	</div>

	 <footer class="navbar-fixed-bottom">
2
		<div class="row">
				<div class="col-md-12 div2">
				<!--页脚-->
					<p class="text-center">Copyright © 2010 - 2018 WEDOCTOR. All Rights Reserved.微医 版权所有 浙ICP备12034511号-2</p>
					<p class="text-center">13231421@123.com.cn</p>
					<!--END页脚-->
				</div>
		</div>
5     </footer>
	<script>
		function getPage(p)
		{
			$('#page').val(p);
			$('#ff').submit()
		}
	</script>


</body></html>